<template>
  <a-spin :spinning="isLoading">
    <div class="container">
      <!-- 数据概况 -->
      <a-card class="overview" :bordered="false">
        <div class="card-title">
          <span>今日数据概况</span>
        </div>
        <a-row class="mt-20" :gutter="32">
          <a-col class :span="8">
            <div class="item flex">
              <div class="col-left">
                <div class="icon-body flex flex-x-center flex-y-center">
                  <a-icon :component="Icons.overview.sale" />
                </div>
              </div>
              <div class="col-right">
                <p class="name">销售额 (元)</p>
                <p class="value">{{ data.overview.orderTotalPrice }}</p>
              </div>
            </div>
          </a-col>
          <a-col class :span="8">
            <div class="item flex">
              <div class="col-left small">
                <div class="icon-body flex flex-x-center flex-y-center">
                  <a-icon :component="Icons.statistics.order" />
                </div>
              </div>
              <div class="col-right">
                <p class="name">订场订单数</p>
                <p class="value">{{ data.overview.bookingOrders }}</p>
              </div>
            </div>
          </a-col>
<!--          <a-col class :span="8">-->
<!--            <div class="item flex">-->
<!--              <div class="col-left small">-->
<!--                <div class="icon-body flex flex-x-center flex-y-center">-->
<!--                  <a-icon :component="Icons.statistics.goods" />-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="col-right">-->
<!--                <p class="name">会员卡订单数</p>-->
<!--                <p class="value">{{ data.overview.membercardOrders }}</p>-->
<!--              </div>-->
<!--            </div>-->
<!--          </a-col>-->
        </a-row>

        <!--
       <a-row class="mt-20" :gutter="32">
         <a-col class :span="8">
           <div class="item flex">
             <div class="col-left">
               <div class="icon-body flex flex-x-center flex-y-center">
                 <a-icon :component="Icons.statistics.user" />
               </div>
             </div>
             <div class="col-right">
               <p class="name">课程订单数</p>
               <p class="value">{{ data.overview.courseOrders }}</p>
             </div>
           </div>
         </a-col>
         <a-col class :span="8">
           <div class="item flex">
             <div class="col-left">
               <div class="icon-body flex flex-x-center flex-y-center">
                 <a-icon :component="Icons.statistics.consume" />
               </div>
             </div>
             <div class="col-right">
               <p class="name">消费人数</p>
               <p class="value">{{ data.overview.consumeUsers }}</p>
             </div>
           </div>
         </a-col>
       </a-row>
       -->
      </a-card>

      <!-- 近七日交易走势 -->
      <a-card class="trade-trend mt-20" :bordered="false">
        <div class="card-title">
          <span>最近七日的订单数量</span>
        </div>
        <div class="echarts-body">
          <div id="main" style="width: 100%; height: 400px"></div>
        </div>
      </a-card>

      <a-card class="trade-trend mt-20" :bordered="false">
        <div class="card-title">
          <span>最近七日的销售额</span>
        </div>
        <div class="echarts-body">
          <div id="sales" style="width: 100%; height: 400px"></div>
        </div>
      </a-card>
    </div>
  </a-spin>
</template>

<script>
import echarts from 'echarts'
import 'echarts/theme/fresh-cut'
import * as Api from '@/api/overview/index'
import * as Icons from './modules/icon'

// 默认数据
const data = {
  overview: {
    userTotal: '0',
    // consumeUsers: '0',
    orderTotal: '0',
    orderTotalPrice: '0.00',
    bookingOrders: '0',
    membercardOrders: '0',
    courseOrders: '0',
  },
  tradeTrend: {
    date: [],
    bookingOrdersOfSevenDays: [],
    membercardOrdersOfSevenDays: [],
    courseOrdersOfSevenDays: [],
  },
}

export default {
  name: 'Index',
  data() {
    return {
      Icons,
      // 正在提交
      isLoading: false,
      // 页面数据
      data,
    }
  },
  created() {
    // 获取页面数据
    this.getData()
  },
  methods: {
    // 获取页面数据
    getData() {
      this.isLoading = true
      Api.data()
        .then((result) => {
          console.log(result)
          const { arenaInfo, cardInfo, courseInfo, tradeTrend } = result.data
          const orderTotal = arenaInfo.orderNums + cardInfo.orderNums + courseInfo.orderNums
          const orderTotalPrice = arenaInfo.totalSalesAmount + cardInfo.totalSalesAmount + courseInfo.totalSalesAmount

          this.data = {
            overview: {
              orderTotal,
              orderTotalPrice,
              bookingOrders: arenaInfo.orderNums,
              membercardOrders: cardInfo.orderNums,
              courseOrders: courseInfo.orderNums,
            },
            tradeTrend,
          }
          // 渲染走势图
          this.$nextTick(() => {
            this.myEcharts()
            this.salesEcharts()
          })
        })
        .finally(() => {
          this.isLoading = false
        })
    },

    // 渲染最近七日的订单数量走势图
    myEcharts() {
      const { data } = this
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('main'), 'fresh-cut')

      // 指定图表的配置项和数据
      const option = {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['订场订单', '会员卡订单', '课程订单'],
        },
        toolbox: {
          show: true,
          showTitle: false,
          feature: {
            mark: { show: true },
            magicType: { show: true, type: ['line', 'bar'] },
          },
        },
        calculable: true,
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.tradeTrend.date,
        },
        yAxis: [
          {
            type: 'value',
             minInterval: 1
          }
        ],
        series: [
          {
            name: '订场订单',
            type: 'line',
            data: data.tradeTrend.bookingOrdersOfSevenDays,
            color: '#826EF0',
          },
          {
            name: '会员卡订单',
            type: 'line',
            data: data.tradeTrend.membercardOrdersOfSevenDays,
            color: '#E6AE4C',
          },
          {
            name: '课程订单',
            type: 'line',
            data: data.tradeTrend.courseOrdersOfSevenDays,
            color: '#5BB4E2',
          }
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },

    // 渲染最近七日的销售额走势图
    salesEcharts() {
      const { data } = this
      // 基于准备好的dom，初始化echarts实例
      const salesEcharts = echarts.init(document.getElementById('sales'), 'fresh-cut')

      // 指定图表的配置项和数据
      const option = {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['订场销售额', '会员卡销售额', '课程销售额', '单日总销售额'],
        },
        toolbox: {
          show: true,
          showTitle: false,
          feature: {
            mark: { show: true },
            magicType: { show: true, type: ['line', 'bar'] },
          },
        },
        calculable: true,
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.tradeTrend.date,
        },
        yAxis: [
          {
            type: 'value',
             minInterval: 1
          }
        ],
        series: [
          {
            name: '订场销售额',
            type: 'line',
            data: data.tradeTrend.bookingSalesOfSevenDays,
            color: '#826EF0',
          },
          {
            name: '会员卡销售额',
            type: 'line',
            data: data.tradeTrend.membercardSalesOfSevenDays,
            color: '#E6AE4C',
          },
          {
            name: '课程销售额',
            type: 'line',
            data: data.tradeTrend.courseSalesOfSevenDays,
            color: '#5BB4E2',
          },
          {
            name: '单日总销售额',
            type: 'line',
            data: data.tradeTrend.salesOfSevenDays,
            color: '#FE552D',
          }
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      salesEcharts.setOption(option)
    },
  },
}
</script>
<style lang="less" scoped>
.card-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
}
// 实时概况
.overview {
  a {
    color: unset;

    &:hover {
      color: #1890ff;
    }
  }

  .screen {
    margin-top: -22px;
    margin-bottom: 30px;
    text-align: center;
    .shortcut-days {
      margin-left: 10px;
      line-height: 32px;
      a {
        margin: 0 3px;
      }
    }
  }

  .item {
    padding: 13px 20px;
  }

  .col-left {
    color: #66aaff;
    font-size: 28px;
    margin-right: 35px;
    &.small {
      font-size: 26px;
    }

    .icon-body {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background-color: #eff6ff;
    }
  }

  .col-right {
    .name {
      font-size: 14px;
      color: #666;
    }

    .value {
      color: #000;
      font-size: 24px;
    }

    .yesterday {
      display: none;
      font-size: 12px;
      color: #999;
    }
  }
}

.ranking-img {
  text-align: center;
}
</style>
